/**
 * Created by xxx on 2017年11月9日.
 */
/**
 * 表单组件
 * @type {*}
 */
var Table = React.createClass({
    render: function () {
        return (
            <tr>
                <td style={{width: '10%'}}>{parseInt(this.props.listNumber)+1}</td>
                <td style={{width: '30%'}}>{this.props.trData.typeName}</td>
                <td style={{width: '20%'}}>{this.props.trData.price}</td>
                <td style={{width: '20%'}}>{this.props.trData.packagePrice=='-1'?<span>----</span>:this.props.trData.packagePrice}</td>
                <td style={{width: '20%'}}>
                    <div className='trButton trLeft clickDliver' onClick={this.props.onClickEdit}>修改</div>
                </td>
            </tr>
        );
    }
});
//父组件
var Main = React.createClass({
    //组件初始状态
    getInitialState: function () {
        return {
            tableData:[
                {
                    id: '1',
                    type: '8',
                    typeName:'13.56考勤卡',
                    price: 0,
                    packagePrice: -1,
                },{
                    id: '2',
                    type: '9',
                    typeName:'2.4G考勤卡',
                    price: 0,
                    packagePrice: -1,
                },{
                    id: '3',
                    type: '2',
                    typeName:'智能学生证',
                    price: 0,
                    packagePrice: 0,
                }
                ],
            selectData: {},
        }
    },
    componentDidMount: function () {
        this.getSystemPrice();
    },
    /**
     * 获取设备价格
     */
    getSystemPrice: function () {
        var svar = this;
        suixun.showLoding();//显示加载中
        suixun.ajax(serverUrl+'/devicePriceManage/getSystemPrice','',"get",function(data){//index:"'+this.state.bannerMenu+'",
            suixun.hideLoding(500);//显示加载中
            if(data.code == 200){
                if(data.info){
                    svar.state.tableData[0].price = data.info.whiteCard13_56Price;
                    svar.state.tableData[1].price = data.info.whiteCard2_4Price;
                    svar.state.tableData[2].price = data.info.smartCardPrice;
                    svar.state.tableData[2].packagePrice = data.info.packagePrice;
                    svar.setState({tableData:svar.state.tableData});
                }else{
                    svar.setState({tableData:[]});
                }
            }else{
                suixun.alert(data.msg);
            }
        });
    },
    /**
     * 显示修改价格页面
     * @param info
     * @returns {XML}
     */
    onClickEdit: function (info) {
        this.setState({selectData:info});
        $(".popModel").show();
    },
    /**
     * 设置价格
     */
    setDevicePrice: function () {
        var svar = this;
        var price = $('#price').val();//硬件价格
        var packagePrice = $('#packagePrice').val();//硬件套餐价格

        if(price==''){
            suixun.alert('硬件价格不能为空！');
            return;
        }
        if(!this.judgePrice(price)){
            suixun.alert('请输入正确的硬件价格！');
            return;
        }
        if(this.state.selectData.packagePrice==-1&&packagePrice!=''){
            if(packagePrice==''){
                suixun.alert('套餐价格不能为空！');
                return;
            }
            if(!this.judgePrice(packagePrice)){
                suixun.alert('请输入正确的套餐价格！');
                return;
            }
        }
        if(this.state.selectData.packagePrice!=-1&&packagePrice==''){
            suixun.alert('套餐价格不能为空！');
            return;
        }else if(!this.judgePrice(price)){
            suixun.alert('请输入正确的套餐价格！');
            return;
        }


        var data = new FormData();
        if(this.state.selectData.type==2){
            data.append("smartCardPrice",price);
            data.append("packagePrice",packagePrice);
        }
        if(this.state.selectData.type==8){
            data.append("whiteCard13_56Price",price);
        }
        if(this.state.selectData.type==9){
            data.append("whiteCard2_4Price",price);
        }
        suixun.showLoding();//显示加载中
        suixun.ajax(serverUrl+'/devicePriceManage/saveSystemPrice',data,"post",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                suixun.alert('操作成功!',function (data) {
                    if(data){
                        svar.getSystemPrice();
                        svar.onClickHidePop();
                    }
                });
            }else{
                suixun.alert(data.msg);
            }
        });
    },
    /**
     * 关闭修改价格弹出框
     */
    onClickHidePop: function () {
        $(".popModel").hide();
        $(".errorMsg").hide();
    },
    /**
     * 验证金额
     * @param e
     */
    onChangePrice: function (e) {
        if(this.judgePrice(e.target.value)||e.target.value==''){
            $("."+e.target.getAttribute('data-error')+"").hide();
        }else{
            $("."+e.target.getAttribute('data-error')+"").show();
        }
    },
    /**
     * 价格验证
     * @param value
     * @return boolean
     */
    judgePrice: function (value) {
        var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
       if(!reg.test(value)){
            return false;
        }else{
            return true;
        }

    },
    render: function () {
        {
            var svar = this;
            var onClickArray = [this.onClickEdit];
            var Tabels = this.state.tableData.map(function (data,index) {
                return (
                    <Table key={data.bannerId} onClickEdit={onClickArray[0].bind(svar,data)} listNumber={index} trData={data}/>
                )
            })
        }
        return (
            <div className="tableManage-body">
                <div  className="popPhone popModel">
                    <div className="model"></div>
                    <div className="popModel-info">
                        <div className="popModel-title">
                            <span className="popModel-title-content">
                                <span className="popModel-title-content-solid-left"/>
                                    修改设备价格
                                <span className="popModel-title-content-solid-right"/>
                            </span>
                            <span className="popModel-title-img" onClick={this.onClickHidePop}><img src="../img/icon/close.png" alt="关闭"/></span>
                        </div>
                        <div className="popModel-body">
                            <div className="popModel-body-imei">
                                <span className="popModel-body-imei-title">设备类型</span>
                                <span className="popModel-body-imei-content">{this.state.selectData.typeName}</span>
                            </div>
                            <div className="popModel-body-phone popModel-body-input">
                                <span className="popModel-body-phone-title popModel-body-input-title">硬件价格</span>
                                <span className="popModel-body-phone-id popModel-body-input-id" style={{display:'none'}}/>
                                <span className="popModel-body-phone-content popModel-body-input-content">
                                    <input className="phone-content input-content " id="price" type="text" maxLength='20' data-error="changePrice"  placeholder="请输入要修改的金额" onChange={this.onChangePrice} />
                                </span>
                                <div className="errorMsg changePrice" />
                            </div>
                            <div className="popModel-body-phone popModel-body-input">
                                <span className={this.state.selectData.packagePrice==-1?"popModel-body-phone-title popModel-body-input-title noImg":"popModel-body-phone-title popModel-body-input-title"}>套餐价格</span>
                                <span className="popModel-body-phone-id popModel-body-input-id" style={{display:'none'}}/>
                                <span className="popModel-body-phone-content popModel-body-input-content">
                                    <input className="phone-content input-content " id="packagePrice" type="text" data-error="changePackagePrice" maxLength='20' placeholder="请输入要修改的金额" onChange={this.onChangePrice} />
                                </span>
                                <div className="errorMsg changePackagePrice" />
                            </div>
                        </div>
                        <div className="popModel-button">
                            <span className="popModel-button-ok" onClick={this.setDevicePrice}>确定</span>
                        </div>
                    </div>
                </div>
                <header>
                    <div className="header-left">
                        <div className="header-left-studentInfo">
                            <a href="./getSystemPrice.html" className="header-left-button menu-width showOrder ">默认价格</a>
                            <a href="./schoolPrice.html" className="header-left-button ">学校价格</a>
                            <a href="./devicePrice.html" className="header-left-button ">设备价格</a>
                        </div>
                        <div className="header-left-annotationsInfo">
                            <img src="../img/icon/annotations.png" />
                            <span className="header-left-annotations-arrowsLeft"/>
                            <div className="header-left-annotations">这里是注释。</div>
                        </div>
                    </div>
                </header>
                <div className="tableInfo">
                    <div className="tableInfo-data">
                        <div className="tableInfo-data-table" >
                            <table className="head-body">
                                <thead>
                                    <th style={{width: '10%'}}>序号</th>
                                    <th style={{width: '30%'}}>设备类型</th>
                                    <th style={{width: '20%'}}>硬件价格</th>
                                    <th style={{width: '20%'}}>套餐价格</th>
                                    <th style={{width: '20%'}}>操作</th>
                                </thead>
                                <tbody>
                                {this.state.tableData==""?'':Tabels}
                                </tbody>
                            </table>
                            {this.state.tableData==""?<div className="tableNoData">{tableNoDataCount}</div>:''}
                        </div>
                    </div>
                </div>
                <footer id="copyright">
                    <span><img src="../img/icon/copyright.png"/>{copyright}</span>
                </footer>
            </div>
        );
    }
});
ReactDOM.render(
    <Main />,
    document.getElementById('tableManage')
);